<template>
  <div class="select-people">
    <div class="select-people_hd">
      <p>
        已选（
        <!-- 选组时，已选为组个数 其他为人数 -->
        <span class="select-quantity">{{
          type === 'group' ? selectList.length : numberSelect
        }}</span>
        /<span class="limit">{{ maxCount === '不限' ? allpeopleNum.length : maxCount }}</span
        >）
      </p>
      <p
        class="empty"
        :class="{ 'pick-theme-color': selectList.length > 0 }"
        @click="selectList.length > 0 && clickEmptyHandler()"
      >
        清空
      </p>
    </div>
    <ul class="select-people_bd">
      <li
        v-for="t in selectList"
        :key="t.id"
        class="people-item"
        @click="isFixData(t) && clickDelSelect(t)"
      >
        <p
          :class="{
            'people-name': isFixData(t)
          }"
        >
          {{ t.userName }}
        </p>
        <svg v-if="isFixData(t)" class="pick-icon pick-delete" aria-hidden="true">
          <use xlink:href="#icon-tanchuang_icon_delete"></use>
        </svg>
      </li>
    </ul>
    <div class="select-people_ft">
      <TjButton theme="default" variant="outline" @click="emit('clickCloseHandler')">
        {{ closeText }}</TjButton
      >
      <TjButton
        theme="primary"
        :disabled="selectList.length === 0"
        @click="selectList.length > 0 && clickOkHandler()"
      >
        {{ okText }}</TjButton
      >
    </div>
  </div>
  <TjDialog
    v-model:visible="warningVisible"
    theme="warning"
    header="是否清空所有已选"
    body="清空所有已选人员将无法撤销"
    :on-close="close3"
    :cancel-btn="'取消'"
    @confirm="onClickConfirm"
  />
</template>

<script>
export default {
  name: 'SelectPeople'
};
</script>
<script setup>
import { defineProps, defineEmits, inject, ref, computed } from 'vue';
import { TjButton, TjDialog } from 'tj-design-vue';
import store from '@/store';
const props = defineProps({
  closeText: {
    type: String
  },
  okText: {
    type: String
  },
  selectList: {
    // type: Array,
    // default: () => []
  }
});
const warningVisible = ref(false);
// 已选人数或者组数
const numberSelect = inject('numberSelect');
// 最大限制
const maxCount = inject('maxCount');
const allpeopleNum = ref(store.state.user.allPeoples);
// 选择类型
const type = inject('type');
// 固定数据
const fixData = inject('fixData');
// 点击确定
const clickOkHandler = () => {
  emit('clickOKHandler');
};
// 点击清空
const clickEmptyHandler = () => {
  warningVisible.value = true;
};
const onClickConfirm = () => {
  warningVisible.value = false;
  emit('emptySelectHandler', undefined, undefined, undefined, 'allPeople');
};
// 删除选中
const clickDelSelect = item => {
  let id = item.userId ? item.userId : item.categoryId;
  let key = item.userId ? 'userId' : 'categoryId';
  emit('emptySelectHandler', id, key, item?.numberPeople, 'allPeople');
};
// 判断是否为固定数据
const isFixData = computed(() => item => {
  if (fixData.value?.length > 0) {
    let key = item.userId ? 'userId' : 'categoryId';
    return !fixData.value.some(t => t[key] === item[key]);
  }
  return true;
});
const emit = defineEmits(['clickCloseHandler', 'emptySelectHandler', 'clickOKHandler']);
</script>

<style lang="less" scoped>
.select-people {
  height: 100%;
  position: relative;
  .select-people_hd {
    font-family: PingFang SC, PingFang SC-400 !important;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    margin-bottom: 8px;
    color: rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid rgba(186, 191, 197, 0.4);
    .empty {
      z-index: 1000;
    }
    .select-quantity {
      color: #000;
    }
    .limit {
      font-size: 12px;
    }
  }
  .select-people_bd {
    width: calc(100% + 8px);
    max-height: 450px;
    display: flex;
    overflow-y: scroll;
    flex-wrap: wrap;
    .people-item {
      z-index: 1000;
      min-height: 30px;
      cursor: pointer;
      background: #f5f6f7;
      border-radius: 4px;
      padding: 4px 8px;
      margin: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: rgba(0, 0, 0, 0.6);
      .pick-delete {
        vertical-align: middle;
        // margin-top: 2px;
      }
      .people-name {
        margin-right: 8px;
      }
      &:hover {
        background: #eff0f1 !important;
        color: rgba(0, 0, 0, 0.8) !important;
      }
    }
  }
  .select-people_ft {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    position: absolute;
    bottom: 0px;
    button:first-child {
      margin-right: 16px;
    }
  }
}
// .pick-btn {
//   width: 60px;
//   height: 32px;
//   border: 1px solid rgba(186, 191, 197, 0.4);
//   background-color: #fff;
//   color: rgba(0, 0, 0, 0.4);
//   border-radius: 4px;
//   cursor: pointer;
//   &:hover {
//     border-color: var(--tj-primary-color) !important;
//     color: var(--tj-primary-color) !important;
//   }
// }
// .pick-btn-primary {
//   background-color: var(--tj-primary-color);
//   color: #fff;
//   border: 0 !important;
//   &:hover {
//     background-color: var(--tj-primary-color-4);
//     color: #fff !important;
//   }
// }
// .pick-disabled {
//   background: #cfd3d6 !important;
//   &:hover {
//     color: #fff !important;
//     border-color: rgba(186, 191, 197, 0.4) !important;
//   }
// }
.pick-theme-color {
  cursor: pointer;
}
</style>
